<template>
	<view class="content">
		<view class="header-bar">
            <view class="status_bar"></view>
            <!-- 搜索栏 -->
                <view class="search-bar">
                    <view class="icon-logo"></view>
                    <navigator class="input-wrap" url="../search/search">
                        <view class="icon-search"></view>
                        <input disabled type="text" placeholder="搜索商品名称" placeholder-class="input-placeholder" />
                    </navigator>
                    <!-- #ifdef H5 || APP-PLUS -->
                    <navigator open-type="switchTab" url="../my/index">
                        <image class="icon-user" src="../../static/images/tabbar/icon-user.23496a0116.png" mode=""></image>
                    </navigator>
                    <!-- #endif -->
                </view>
            <!-- 导航栏 -->
            <view class="nav-bar">
                <view @click="showDefaultNav=!showDefaultNav" class="nav-display">
                    <view class="icon-display" :class="{unfold:!showDefaultNav}"></view>
                </view>
                <view v-show="showDefaultNav" class="default-nav flex-row">
                    <view class="nav-item" 
                        v-for="(item,index) of navArr" 
                        @click="handleClickNav(item)"
                        :class="{active:currentNav==item}"
                        :key="index"><view>{{item}}</view></view>
                </view>
                <view v-show="!showDefaultNav" class="all-nav">
                    <view class="title">全部</view>
                    <view class="nav-container">
                        <view class="nav-item"
                            v-for="(item,index) of navArr" 
                            @click="handleClickNav(item)"
                            :class="{active:currentNav==item}"
                            :key="index">{{item}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view @click="showDefaultNav=true" v-show="!showDefaultNav" class="mask"></view>
	</view>
</template>

<script>
	export default {
        name:'HomeHeader',
		data() {
			return {
				navArr:['推荐','手机','智能','电视','笔记本','家电','生活周边'],
                showDefaultNav:true,
                currentNav:'推荐'
			}
		},
        watch:{
            currentNav(val){
                // console.log(val);
                this.$emit('navChange',val)
            }
        },
		onLoad() {

		},
		methods: {
            handleClickNav(nav){
                console.log(11);
                this.currentNav = nav
            }
		}
	}
</script>

<style lang="stylus" scoped>
    .content
        padding-top calc(var(--status-bar-height) + 147.5rpx)
        .header-bar
            position fixed
            z-index 10
            top 0
            width 100%
            background #f2f2f2
            .search-bar
                display flex
                justify-content space-between
                align-items center
                height 87.5rpx
                .icon-logo
                    width 50rpx
                    height 32rpx
                    margin 0 26rpx
                    background url('')
                    background-size cover
                .input-wrap
                    position relative
                    flex 1
                    // #ifdef MP-WEIXIN
                    padding-right: 200rpx;
                    box-sizing border-box
                    // #endif
                    .icon-search
                        position absolute
                        top 50%
                        transform translateY(-50%)
                        left 12rpx
                        width 42rpx
                        height 42rpx
                        background url('')
                        background-size cover
                    input
                        height 66.5rpx
                        background #FFFFFF
                        border 2rpx solid #e5e5e5
                        padding-left 62.5rpx
                        border-radius 80rpx
                        .input-placeholder
                            color rgba(0,0,0,.3)
                .icon-user
                    width 42rpx
                    height 42rpx
                    margin 8rpx 32rpx 0
            .nav-bar
                position relative
                .nav-display
                    position absolute
                    right 0
                    top 0
                    width 70rpx
                    height 57rpx
                    box-sizing border-box
                    padding-left 12rpx
                    padding-top 12rpx
                    background #F2F2F2
                    box-shadow: -15rpx 0 15rpx 0 #f2f2f2
                    .icon-display
                        width 41.66rpx
                        height 41.66rpx
                        background url('')
                        background-size cover
                        transition transform .2s linear
                        &.unfold
                            transform: rotate(180deg)
                .default-nav
                    &::-webkit-scrollbar
                        height 0
                        background transparent
                    height 60rpx
                    padding-right 79rpx
                    overflow-x auto
                    white-space: nowrap;
                    font-size 28rpx
                    color rgb(116, 116, 116)
                    .nav-item
                        padding 0 26rpx
                        &>view
                            height 60rpx
                            line-height 60rpx
                            box-sizing border-box
                        &.active>view
                            color rgb(237, 91, 0)
                            border-bottom 4rpx solid rgb(237, 91, 0)
                .all-nav
                    padding 26rpx 26rpx 0
                    .nav-container
                        padding-top 35.4rpx
                        justify-content space-between
                        display flex
                        flex-wrap wrap
                        &:after
                            width 154rpx
                            display block
                            height 0
                            content ''
                        .nav-item
                            width 154rpx
                            height 54rpx
                            margin-bottom 25rpx
                            line-height 54rpx
                            text-align center
                            background #FFFFFF
                            border 1px solid #E5E5E5
                            border-radius 8rpx
                            &.active
                                background-color: #fde0d5;
                                border-color: #ff6700;
                                color: #ff6700;
                            
</style>
